<template>
  <pad class="home">
    <div class="banner">
      <img :src="require('./img/banner.jpg')" alt>
    </div>
    <van-notice-bar
      v-if="kuaixun"
      :text="kuaixun.newsName"
      left-icon="volume-o"
      class="kuaixun"
      mode="link"
      @click="kxDetail"
    />
    <div class="clinic">
      <div class="tit">
        <span>我关注的接种门诊</span>
        <span @click="show = true">重新绑定</span>
      </div>
      <div class="content" v-if="followInfo">
        <div class="info">
          <div class="text-overflow">
            <i class="iconfont iconhongshizi"></i>
            {{ followInfo.name }}
          </div>
        </div>
        <div class="info">
          <div class="text-overflow">
            <i class="iconfont icondaohang"></i>
            {{ followInfo.address }}
          </div>
        </div>
        <div class="info">
          <div class="text-overflow">
            <i class="iconfont icondianhua"></i>
            {{ followInfo.phone }}
          </div>
        </div>
        <div class="info">
          <div class="text-overflow">
            <i class="iconfont iconshijian"></i>
            {{ followInfo.inoculationTime }}
          </div>
        </div>
        <div class="info">
          <router-link to="/notice">
            <div class="text-overflow" v-if="followInfo.mzNews">
              <i class="iconfont iconxiaoxi"></i>
              公告：{{ followInfo.mzNews.newsName }}
            </div>
          </router-link>
        </div>
      </div>
      <!-- <van-divider /> -->
      <div class="handle">
        <van-row>
          <van-col span="12">
            <router-link to="/inoculantManage" class="span" tag="div">
              <i class="iconfont icontianjiarenmai"></i>接种人信息
            </router-link>
          </van-col>
          <van-col span="12" class="span">
            <router-link to="/feedbackManage" class="span" tag="div">
              <i class="iconfont iconwenjian"></i>反馈信息
              <!-- <span v-if="wait != 0" style='color:#ee0a24;'> ({{wait}}条待处理)</span> -->
              <van-tag type="danger" v-if="wait != 0" class="tag">({{wait}}条待处理)</van-tag>
            </router-link>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="vaccinate">
      <div class="tit">
        <span>接种相关</span>
      </div>
      <van-row>
        <van-col span="8">
          <router-link to="/consent">
            <i class="iconfont iconhetong"></i>
            <div>知情同意书</div>
          </router-link>
        </van-col>
        <van-col span="8">
          <i class="iconfont iconjishi"></i>
          <count-down v-model="observation" storage-key="observation" @click.native="observation = true"/>
        </van-col>
        <van-col span="8" @click="tip">
          <i class="iconfont iconhezuoqudao"></i>
          <div>问卷调查</div>
        </van-col>
      </van-row>
    </div>

    <!-- 重要提示 -->
    <van-dialog
      v-model="show"
      title="重新绑定"
      confirm-button-text="确认换绑"
      show-cancel-button
      :before-close="beforeClose"
      @open="open"
      :lazy-render="false"
    >
      <div class="dialog-content">
        <!-- <clinic-select ref="clinicSelect"/> -->
        <van-form ref="form">
          <area-select v-model="form.area"/>
          <clinic v-model="form.clinicId"/>
        </van-form>
      </div>
    </van-dialog>
  </pad>
</template>

<script>
import News from "@/components/news";
import Pad from "@/components/pad";
import ScrollView from "@/components/ScrollView";
import { getBanner, getActive } from "@/api/home";
import { getNewsTop } from "@/api/news";
import { getInformatics } from "@/api/user";
import ClinicSelect from "@/components/clinicSelect";
import { follow, followInfo } from "@/api/user";

import AreaSelect from "@/components/area";
import Clinic from "@/components/clinic";
import CountDown from "./components/countdown";
export default {
  data() {
    return {
      banner: "",
      kuaixun: "",
      news: [],
      activity: "",
      show: false,
      followInfo: {},
      form: {},
      feedback: [],
      observation: false
    };
  },
  computed: {
    wait() {
      const today = this.$moment();
      const waits = this.feedback.filter(m => {
        const { processingResult, isCold, approvedVaccinationDate } = m;
        // 0是电话问询1是手机工单
        // 已经填写过不能重复填写  超时不能填写
        if (
          processingResult == 1 &&
          isCold != 0 &&
          isCold != 1
          // this.$moment(approvedVaccinationDate).isAfter(today)
        ) {
          return m;
        }
      });
      return waits.length;
    }
  },
  components: {
    News,
    Pad,
    ClinicSelect,
    AreaSelect,
    Clinic,
    CountDown
  },
  created() {
    // 获取banner
    // getBanner().then(({ data }) => {
    //   console.log(data);
    //   this.banner = data;
    // });

    // 快讯
    getNewsTop().then(res => {
      this.kuaixun = res.data;
    });

    getInformatics().then(res => {
      this.feedback = res.data;
    });

    this.getFollowInfo();
  },
  methods: {
    getFollowInfo() {
      followInfo().then(res => {
        console.log(res);
        this.followInfo = res.data;
      });
    },
    beforeClose(action, done) {
      if (action == "confirm") {
        this.$refs.form
          .validate()
          .then(res => {
            const { clinicId } = this.form;

            follow({
              clinicId
            })
              .then(res => {
                this.$notify({ type: "success", message: "换绑成功" });
                this.getFollowInfo();
              })
              .catch(err => {
                this.$notify({ type: "danger", message: "绑定失败" });
              });

            done();
          })
          .catch(err => {
            done(false);
          });
      } else {
        done();
      }
    },
    open() {
      this.form = {};
      this.$refs.form.resetValidation();
    },
    kxDetail() {
      this.$router.push({
        path: `/articleDetail/${this.kuaixun.id}`
      });
    },
    tip() {
      this.$toast("正在开发中，敬请期待！");
    }
  }
};
</script>
<style lang='scss'>
.home {
  padding-bottom: 1.5rem !important;
  font-size: 0.32rem /* 24/75 */;
  line-height: 1.6;
  background: #fff;
  color: $primaryText;
}

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.banner {
  overflow: hidden;
  margin-bottom: 0.27rem /* 20/75 */;
  img {
    width: 100%;
  }
}

.kuaixun {
  margin-bottom: 0.4rem /* 30/75 */;
}

.tit {
  position: relative;
  font-size: 0.32rem /* 24/75 */;
  padding-left: 0.27rem /* 20/75 */;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.43rem /* 32/75 */;
  color: $baseColor;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    width: 0.13rem /* 10/75 */;
    height: 100%;
    background: $baseColor;
  }
}

.clinic {
  margin-bottom: 0.4rem /* 30/75 */;
  .content {
    padding-bottom: 0.53rem /* 40/75 */;
    border-bottom: 1px solid #e3e3e5;
    margin-bottom: 0.19rem /* 14/75 */;
    .iconfont {
      margin-right: 0.21rem /* 16/75 */;
      color: #909399;
    }
    .info {
      display: flex;
      align-items: center;
    }
  }
  .handle {
    color: $baseColor;
    .span {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .iconfont {
      font-size: 0.67rem /* 50/75 */;
      margin-right: 0.16rem /* 12/75 */;
    }
  }
}

.vaccinate {
  color: $baseColor;
  text-align: center;
  .iconfont {
    font-size: 0.67rem /* 50/75 */;
  }
}

.dialog-content {
  padding: 0.32rem /* 24/75 */;
}

.tag {
  margin-left: 0.13rem /* 10/75 */;
}
</style>
